<template>
  <div class="home">
    <main>
      <router-view></router-view>
    </main>
    <footer>
      <router-link v-for="item in foot"
      :key="item.name"
      :to="`/home/${item.path}`"
      >
        <van-icon :name="item.meta.icon" />
        <span>{{item.meta.title}}</span>
      </router-link>
    </footer>
  </div>
</template>

<script>


export default {
  name: "Home",
  components: {},
  data(){
    return{
      foot:[{
            path: 'homePage',
            name: 'HomePage',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/HomePage.vue'),
            meta: {
                title: '首页',
                // <van-icon name="wap-home-o" />
                icon: 'wap-home-o'
            }
        }, {
            path: 'clissify',
            name: 'Clissify',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/Clissify.vue'),
            meta: {
                title: '分类',
                // <van-icon name="wap-home-o" />
                icon: 'wap-home-o'
            }
        }, {
            path: 'surprise',
            name: 'Surprise',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/Surprise.vue'),
            meta: {
                title: '京喜',
                // <van-icon name="wap-home-o" />
                icon: 'wap-home-o'
            }
        }, {
            path: 'shopCar',
            name: 'ShopCar',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/ShopCar.vue'),
            meta: {
                title: '购物车',
                // <van-icon name="wap-home-o" />
                icon: 'wap-home-o'
            }
        }, {
            path: 'my',
            name: 'My',
            component: () =>
                import ( /* webpackChunkName: "about" */ '../views/Home/My.vue'),
            meta: {
                title: '我的',
                // <van-icon name="wap-home-o" />
                icon: 'wap-home-o'
            }
        }]
    }
  }
};
</script>
<style lang="scss">
*{
  padding: 0;
  margin: 0;
  list-style: none;
  box-sizing: border-box;
}
a{
  text-decoration: none;
}
html,body,#app,.home{
  width: 100%;
  height: 100%;
}
.home{
  display: flex;
  flex-direction: column;
  
  main{
    flex: 1;
    overflow-y: scroll;
  }
  footer{
    width: 100%;
    height: 50px;
    box-shadow: 0 -5px 10px #ccc;
    display: flex;
    justify-content: space-around;
    align-items: center;
    a{
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      color: #333;
      .van-icon{
        font-size: 25px;
      }
    }
    .router-link-active{
      color: red;
    }
  }
}
</style>